<div id="guest-options" class="panel__page guest-options" data-bind="with: $root.guestOptions">
  <!-- ko if: isVisible() -->
    <div class="panel__header">
      <arrow-left-icon class="icon-button" data-bind="click: clickOnBack" data-uie-name="go-back-guest-options"></arrow-left-icon>
      <div class="panel__header__title" data-bind="l10n_text: z.string.guestOptionsTitle"></div>
      <close-icon class="right-panel-close icon-button" data-bind="click: clickOnClose" data-uie-name="do-close"></close-icon>
    </div>
    <div class="panel__content">
      <div class="panel__content__scroll" data-bind="antiscroll: shouldUpdateScrollbar">
        <div class="guest-options__content">
          <guest-mode-toggle params="isChecked: isGuestEnabled(), onToggle: toggleAccessState, isDisabled: requestOngoing"></guest-mode-toggle>
        </div>
        <!-- ko if: showLinkOptions() -->
          <div class="guest-options__info">
            <div class="guest-options__info__head" data-bind="l10n_text: z.string.guestOptionsInfoHeader"></div>
            <div data-bind="l10n_text: z.string.guestOptionsInfoText" data-uie-name="status-guest-options-info"></div>
          </div>
          <!-- ko if: hasAccessCode() -->
            <textarea disabled class="guest-options__link" data-bind="value: conversationEntity().accessCode()" data-uie-name="status-invite-link"></textarea>
            <!-- ko if: isLinkCopied() -->
              <div class="panel__action-item">
                <check-icon class="panel__action-item__icon"></check-icon>
                <div class="panel__action-item__text" data-bind="l10n_text: z.string.guestOptionsCopyLinkDone" data-uie-name="status-copy-link-done"></div>
              </div>
            <!-- /ko -->

            <!-- ko ifnot: isLinkCopied -->
              <div class="panel__action-item" data-bind="click: copyLink">
                <copy-icon class="panel__action-item__icon"></copy-icon>
                <div class="panel__action-item__text" data-bind="l10n_text: z.string.guestOptionsCopyLink" data-uie-name="do-copy-link"></div>
              </div>
            <!-- /ko -->
            <div class="panel__action-item" data-bind="click: revokeAccessCode">
              <close-icon class="panel__action-item__icon"></close-icon>
              <div class="panel__action-item__text" data-bind="l10n_text: z.string.guestOptionsRevokeLink" data-uie-name="do-revoke-link"></div>
            </div>
          <!-- /ko -->

          <!-- ko ifnot: hasAccessCode() -->
            <div class="panel__action-item" data-bind="click: requestAccessCode">
              <link-icon class="panel__action-item__icon"></link-icon>
              <div class="panel__action-item__text" data-bind="l10n_text: z.string.guestOptionsCreateLink" data-uie-name="do-create-link"></div>
            </div>
          <!-- /ko -->
        <!-- /ko -->
      </div>
    </div>
  <!-- /ko -->
</div>
